<!--  -->
<template>
  <div class=''>
    <el-form ref="formInline" :inline="true" size="small" :model="flagCusMolde" class="demo-form-inline">
      <el-form-item label="关键字搜索" prop="kw">
        <el-input v-model="flagCusMolde.kw" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="getUserConfigList"
          class="queryButton"
          icon="el-icon-search">查询</el-button>
        <el-button
          class="resetButton"
          @click="resetQuery('formInline')"
          icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="changeBox">
      <div
        :class="[item.ischecked ? 'ischecked' : 'nochecked']" 
        v-for="(item,index) in isCheckedArr"
        @click="changeBoxIndex(index)" 
        :key="item.id">{{ item.name }}</div>
    </div>
    <div class="outsideBox">
      <div class="messageBox" v-for="(item,index) in userConfigTableArr" :key="index">
        {{ item.userName }} : 
        <el-input class="myInput" v-permissions="'userConfig:update'" @blur="loseFcous(item)" v-show="typeForIndex === 0" v-model="item.maxNum" placeholder="请输入客户最大值"></el-input>
        <el-input class="myInput" v-permissions="'userConfig:update'" @blur="loseFcous(item)" v-show="typeForIndex === 1" v-model="item.newUpNum" placeholder="请输入新客户最大值"></el-input>
        <el-input class="myInput" v-permissions="'userConfig:update'" @blur="loseFcous(item)" v-show="typeForIndex === 2" v-model="item.orderNum" placeholder="请输入权重"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { userConfigList , userConfigUpdate} from '@/request/userConfigList';
import { timestampToDate } from '@/until/paramRou'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        isCheckedArr: [
          {
            name: '客户最大数量',
            id: 0,
            ischecked: true,
          },
          {
            name: '新客户最大数量',
            id: 1,
            ischecked: false,
          },
          {
            name: '权重',
            id: 2,
            ischecked: false,
          }
        ],
        flagCusMolde: {
          kw: '',
          clientId: '',
          value_flag: [],
        },
        userConfigTableArr: [],
        typeForIndex: 0
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeBoxIndex(val){
      for (const element of this.isCheckedArr) {
        element.ischecked = false
      }
      this.typeForIndex = val
      this.isCheckedArr[val].ischecked = true
      this.getUserConfigList()
    },
    getUserConfigList(){
      let userConfigOBJ = {
        kw: this.flagCusMolde.kw
      }
      userConfigList(userConfigOBJ).then(res => {
        if (res.code === '200') {
          this.userConfigTableArr = res.data
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    resetQuery(fromName){
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
      this.flagCusMolde.value_flag = []
    },
    loseFcous(val){
      // console.log(val);
      let updateUserConfig = {
        configId: val.id,
        maxNum: val.maxNum,
        newUpNum: val.newUpNum,
        orderNum: val.orderNum,
      }
      userConfigUpdate(updateUserConfig).then(res => {
        if (res.code === '200') {
          this.getUserConfigList()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getUserConfigList()
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.changeBox {
  width: 360px;
  margin: 10px auto;
  height: 30px;
  display: flex;
  line-height: 30px;
  border: 1px solid $color-primary;
  :nth-child(1) {
    width: 120px;
  }
  :nth-child(2) {
    width: 120px;
    border-right: 1px solid $color-primary;
    border-left: 1px solid $color-primary;
  }
  :nth-child(3) {
    width: 120px;
  }
  .ischecked {
    text-align: center;
    background: $color-primary;
    color: #fff;
  }
  .nochecked {
    background: #fff;
    text-align: center;
  }
}
.outsideBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .messageBox {
    width: auto;
    height: 50px;
    border: 1px solid #000;
    margin: 0 0 8px 8px ;
    padding: 0 5px;
    line-height: 50px;
    .myInput {
      width: 150px;
    }
  }
}
</style>
